<template>
<div style="padding-bottom:100px">
  <van-row>
    <van-col span="24" >
      <!--登录成功后显示-->
      <div class="logo">
        <img v-show="this.imgurl!==''" :src="this.imgurl"  title="点击修改图片">
        <img v-show="this.imgurl===''" src="../assets/logo.png"  title="点击修改图片">
<!--        <img :src="this.imgurl==''?require('../assets/logo.png'):this.imgurl"  title="点击修改图片">-->
        <input class="imgput" type="file" id='image' accept="image/*"  @change.prevent.stop="setImg($event)"  >
      </div>
      <!-- 没有登录的时候 -->
      <van-col span="24" type="flex" justify="center">
        <van-col span="6">
        </van-col>
        <van-col span="12" style="display: flex;justify-content: space-around;padding-bottom:10px">
          <span v-if="Phone">{{userPhone}}</span>
          <van-button round type="default" v-if="flag"  to="/logoin">登录</van-button>
          <van-button round type="default" v-if="flag" to="/register">注册</van-button>
        </van-col>
        <van-col span="6">
        </van-col>
        </van-col>
    </van-col>
  </van-row>
  <van-grid :border="false" :column-num="4">
    <van-grid-item>
      <router-link to="/orderList" tag="span">{{order.number}}</router-link>
      <span>我的订单</span>
    </van-grid-item>
    <van-grid-item>
      <router-link to="/Collection" tag="span">{{CollectionNum.number}}</router-link>
      <span>收藏的商品</span>
    </van-grid-item>
    <van-grid-item>
      <span>0</span>
      <span>关注的商品</span>
    </van-grid-item>
    <van-grid-item>
      <router-link to="/footprint" tag="span">{{footprintNum.number}}</router-link>
      <span>我的足迹</span>
    </van-grid-item>
  </van-grid>
  <div>
    <router-link tag="van-cell" to="/orderList" is-link @click="">我的订单</router-link>
    <van-grid>
      <van-grid-item icon="todo-list" @click="setPath" text="全部订单"/>
      <van-grid-item icon="balance-list" text="待付款" />
      <van-grid-item icon="underway" text="待收货" />
      <van-grid-item icon="gold-coin" text="退款/退货" />
    </van-grid>
  </div>
<div style="height:300px;overflow: hidden">
  <van-cell is-link to="/orderList" style="margin-bottom:10px">收货地址管理</van-cell>
  <van-cell is-link @click="">联系客服</van-cell>
  <van-cell is-link to="/Feedback">意见反馈</van-cell>
  <van-cell is-link to="/theme" >修改主题</van-cell>
  <van-cell is-link >关于我们</van-cell>
  <van-cell is-link @click="signOut">退出登录</van-cell>
</div>
</div>
</template>

<script>
import {Dialog,Toast} from "vant";
export default {
  name: "user",
  data(){
    return{
      imgurl:'',
      flag:true,
      userPhone:'',
      Phone:false,
    }
  },
  created() {
    let token=JSON.parse(sessionStorage.getItem('token'))
    let user=JSON.parse(sessionStorage.getItem('user'))
    if(token!=null){
      if(token.length>0){
        this.flag=false;
        this.Phone=true;
        this.userPhone=user.phone;//设置电话
        this.imgurl=user.fileName;//设置头像
      }
      return
      }
  },
  methods:{
    setImg(event){
      let user=JSON.parse(sessionStorage.getItem('user'))
      if(user!==null){
        let files = event.target.files[0];
        //获取本地图片地址
        let fileName = this.getObjectUrl(files);
        user.imgurl=fileName;
        sessionStorage.setItem('user',JSON.stringify(user))
        this.imgurl=fileName;
        return
      }
      Toast("请先登录！")
    },
    //转换获取本地图片地址
    getObjectUrl(file) {
      if(file==undefined){
        return
      }
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url
    },
    //退出功能
    signOut(){
      Dialog.confirm({
        title: '退出',
        message: '您确定要退出吗？',
      })
          .then(() => {
            sessionStorage.setItem("token",JSON.stringify(''))
            //将用户数据清除
            sessionStorage.setItem('user',JSON.stringify(''))
            //数据从新加载
            location.reload()
          })
          .catch(() => {
            return
          });
    }
  },
  computed:{
    order(){
      return this.$store.getters["addorder/getorder"]
    },
    footprintNum(){
      return this.$store.getters["footprint/getfootprintList"]
    },
    CollectionNum(){
      return this.$store.getters["detail/getCollection"]
    }
  },

}
</script>

<style scoped lang="less">
.imgput{opacity: 0.01;position: absolute;top: 50%;left: 50%;transform:translateX(-25%) translateY(-25%)}
.van-grid{border-bottom: #ccc 4px solid;margin-bottom:6px;border-radius:20px}
.logo{background:#fff;margin:20px 0;position:relative;left:50%;top:50%;width:40%;height:40%;border-radius:100%;transform:translateX(-50%);overflow: hidden;img{height:auto;width:100%}}
</style>